<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #main {
            width: 1000px;
            height: 600px;
            /* background-color: aqua; */
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div id="main"></div>
    <script src="echarts.min.js"></script>
    <script>
        const ec = echarts.init(document.querySelector('#main'))
        option = {
            color: [
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#9ccbe5' // 0% 处的颜色
                        },
                        {
                            offset: 1,
                            color: '#f4c1cd' // 100% 处的颜色
                        }
                    ],
                    global: false // 缺省为 false
                },
                {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.1,
                    colorStops: [
                        {
                            offset: 0,
                            color: '#ff0000' // 0% 处的颜色
                        },
                        {
                            offset: 0.5,
                            color: '#fff' // 100% 处的颜色
                        },
                        {
                            offset: 1,
                            color: '#ff0000' // 100% 处的颜色
                        }
                    ],
                    global: false // 缺省为 false
                },
                {
                    repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'
                }
            ],
            legend: {},
            tooltip: {},
            dataset: {
                source: [
                    ['product', '2015', '2016', '2017'],
                    ['Matcha Latte', 43.3, 85.8, 93.7],
                    ['Milk Tea', 83.1, 73.4, 55.1],
                    ['Cheese Cocoa', 86.4, 65.2, 82.5],
                    ['Walnut Brownie', 72.4, 53.9, 39.1]
                ]
            },
            xAxis: {
                type: 'category',
                splitLine: {
                    // 线的样式
                    lineStyle: {
                        type: 'dashed',
                        color: '#d4d4d6'
                    }
                }

            },
            yAxis: {},
            // Declare several bar series, each will be mapped
            // to a column of dataset.source by default.
            series: [{ type: 'bar' }, { type: 'bar' }]
        };
        ec.setOption(option);

    </script>
</body>

</html>